<template>
    <div>
        <Tables
          :title ='title' 
          :butns = 'butns' 
          :field = 'field' 
          :tableData ='tableData' 
          :perNum='per_num' 
          :totalNum="total_num" 
          :pageSize='pageSize' 
          :collectField = "collect_field"
          :curPage ="cur_page" 
          :clearSelectItems="selectedItems"
          :rankable ="true"
           @rankData = "rankData"
           @reset="reset"  
           @loadData ="getData" 
           @sentSelectedItems="getSelectedItems"
           @sentEditData="getEditData"
           @changePageSize = 'changePageSize'
           >
            <div slot="filter">
                <flieImport :type="'trunk'" :title="title"  @getData='fileReload'></flieImport>
            </div>
        </Tables>
        <Modals 
            :id ="'modal'" 
            :title ='title' 
            :field = 'field' 
            :collectField = "collect_field"
            :selectItem = "select_item" 
            :status = "status" 
            :errorMsg="errorMsg" 
            :type="type" 
            :selectedItems="selectedItems" 
            :editData = "edit_data"  
            @sentErrorMsg = "getErrorMsg"
            @addEvent ="addData" 
            @editEvent = "editData" 
            @delEvent = "delDada">
        </Modals>
    </div>
</template>
<script>
    import Tables from 'components/common/Tables'
    import Modals from 'components/common/Modals'
    import NetService from 'services/netService' 
    import PageData from 'libs/PageData'

    import flieImport from 'components/common/flieImport'
    import SystemService from 'services/systemService'
    let butns = [
         {
            type:'add',
            name:'添加',
            event:'addEvent',
            icon:'/static/img/add.png',
            class:'add_btn',
        },
        {
            type:'del',
            name:'删除',
            event:'delEvent',
            icon:'/static/img/delete.png',
            class:'del_btn',
        },
        {
            type:'edit',
            name:'编辑',
            event:'editEvent',
            icon:'/static/img/modpic.png',
            class:'edit_btn',
        }
    ]
    let field = [
        {
            type:'checkbox',
        },
        {
            type:'rank',
        },
        {
            type:'macinput',
            label:'MAC地址',
            name:'mac',          
            regex: /^[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}$/,
            requried:true, 
            remark:'*必填',
           
        },
        {
            type:'ipinput',
            label:'IP地址',
            name:'ip',
            regex:/^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/,
            requried:true, 
            remark:'*必填'  
        },
        {
            type:'text',
            label:'VLAN',
            name:'vlan_id',
            regex:/^\d$|^[1-9]\d{0,2}$|^[1-3]\d{3}$|^40\d[0-4]$/,
            requried:true, 
            remark:'*必填 (0~4094的整数)'  
        },
        {
            type:'select',
            label:'物理线路',
            name:'group_id',
            regex:/\S/,
            requried:true, 
            remark:'*必选'  
        },    
        {
            type:'none',
            label:'备注',
            name:'description',
            editable:true,
            regex:/^[\w\u4e00-\u9fa5]{0,16}$/
        }
    ]
    export default {
		components:{
		    Tables,
            Modals,
            flieImport
	    },
        data() {
            return{
                title:'透传主机',
                butns:butns,
                field:field,
                tableData:[],
                per_num:25,
                total_num:1,
                cur_page:1,
                pageSize:[10, 20, 40, 80],
                size:10,
                collect_field:'id',
                status:"",
                errorMsg:'',
                type:'',
                selectedItems:[],
                edit_data:{},
                select_item:[],
                order:'',
                by:''
            }
        },
        created() {
            this.getData()
            this.getLine()
        },
        methods:{
            getSelectedItems(selectedItems) {
                this.selectedItems = selectedItems
            },
            getErrorMsg(msg) {
                this.errorMsg = msg
            },
            getEditData(editdata) {
                this.edit_data = editdata 
            },
            reset(type) {
                this.status = ""
                this.errorMsg = ''
                this.type = type
                $('.inputs_wrap .error_foramt').removeClass('error_foramt')
            }, 
            getLine() {
                SystemService.getLine()
                .then((res) => {        
                    if (res.errcode === 0) {
                        this.select_item = res.group_id.map((item)=>{
                            return  '线路' + item
                        })
                    }
                })
            }, 
            changePageSize (nowpage, size) {
                this.cur_page = nowpage
                this.size = size
                this.getData()
            }, 
            rankData(param){
                this.order = param.order
                this.by =  param.by
                this.getData()
            },
            fileReload () {
                this.cur_page = 1
                this.getData()
            },
            getData(){
                NetService.getDoTrunk(this.cur_page,this.size, this.order, this.by)
                .then((res)=>{
                    if(res.errcode === 0){
                        this.tableData = res['25'].data.map((item)=>{
                            item.group_id = '线路'+item.group_id
                            return item
                        })
                        this.total_num = res['25'].count
                    }
                })
            },
            addData(params){                 
                 let group_id = params.group_id.replace(/[^0-9]/ig,'')//取线路数字
                 let conf = `${params.mac}|${params.ip}|${params.vlan_id}|${group_id}`
                 this.status ='ing'
                 NetService.addDoTrunk(conf)
                .then((res)=>{      
                    if(res.errcode === 0){
                       this.status ='ok'
                       this.getData()
                       $('#modal').modal('hide')
                    }else {
                        this.status ='error'
                        this.errorMsg = res.errorMessage	
                    }
                })
            },
            editData(params){
                 let group_id = params.group_id.replace(/[^0-9]/ig,'')//取线路数字
                 let conf = `${params.id}|${params.mac}|${params.ip}|${params.vlan_id}|${group_id}`
                  this.status ='ing'
                 NetService.editDoTrunk(conf)
                .then((res)=>{
                    if(res.errcode === 0){
                        this.status ='ok'                       
                        $('#modal').modal('hide')
                        this.getData()
                    }else {
                        this.status ='error'
                        this.errorMsg = res.errorMessage	
                    }
                })
            },
            delDada(params){
                 this.status ='ing'
                 NetService.delDoTrunk(params.ids)
                .then((res)=>{
                    if(res.errcode === 0){
                        this.status ='ok'
                        this.getData()
                        $('#modal').modal('hide')
                        this.selectedItems = []
                    }else {
                        this.status ='error'
                        this.errorMsg = res.errorMessage	
                    }
                })
            }

        }
    }
</script>